/*
 * 规格添加
 * @Author: ljb 
 * @Date: 2018-03-27 17:53:51 
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-06-01 14:43:14
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-product-specification-create {
        min-height: 600px;
    }
    
</style>
<template>
<div class="v-admin-product-specification-create">
    <Row type="flex" justify="start">
        <Col push="1">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

                <Form-item label="所属模型" prop="product_mod_id">
                    <Select v-model="formValidate.product_mod_id" clearable filterable transfer>
                       <Option v-for="model in productModels" :value="model.id + ''" :key="model.id">{{ model.name }}</Option>
                    </Select>
                </Form-item>
                
                <Form-item label="规格名称" prop="name">
                    <Input type="text" v-model="formValidate.name" placeholder="请输入规格名称"></Input>
                </Form-item>

                <Form-item v-for="(value,index) in formValidate.values" :key="index" :label="'规格值' + (index + 1)" prop="values">
                    <Row>
                        <Col span="22">
                            <Input type="text" v-model="value.name" placeholder="请输入规格值"></Input>
                        </Col>
                        <Col span="1" :offset="1">
                            <Button type="error" size="small" icon="minus" @click="deleteSpec(index)"></Button>
                        </Col>
                    </Row>
                </Form-item>

                <Form-item label="增删规格值">
                    <Button type="success" size="small" icon="plus" @click="addSpec"></Button>
                </Form-item>

                <Form-item>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </Form-item>

            </Form>
        </Col>
    </Row>
</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

import { validateArrayValue } from 'src/validate';

export default {
    name: 'product-specification-create',

    props: ['productModels'],

    data() {	
        return {

            formValidate : {

                name : '',

                product_mod_id : '',

                values : []

            },                  //新建视频时的表单

            ruleValidate: {
                name: [
                    { required: true, message: '规格名称不能为空', trigger: 'blur,change' }
                ],
                product_mod_id: [
                    { required: true, message: '所属模型不能为空', trigger: 'blur,change' },
                ],
                values: [
                    { required: true, validator: validateArrayValue, trigger: 'blur,change', name: '规格' },
                ]
            },

        }
    },
    methods: {

        /**
         * 增加规格值
         * @return {undefined}
         */
        addSpec(){

            const param = {
                name : ''
            };

            this.formValidate.values.push(param);

        },

        /**
         * 删除规格值
         * @param  {number} index {需要删除的项目的下标}
         * @return {undefined}
         */
        deleteSpec(index){

            this.formValidate.values.splice(index,1);

        },

        /**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if ( valid ) {

                    this.dataPost();

                } else {

                    this.$Message.error('存在未填写的条目!');

                }
            })
        },

        /**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined} 
         */
        handleReset (name) {

            this.$refs[name].resetFields();

            this.formValidate.values = [];

        },

        /**
         * post数据
         * @return {undefined}
         */
        dataPost(){

            const values = this.formValidate.values.map((value) => value.name);

            const param = {

                name : this.formValidate.name,

                product_mod_id : this.formValidate.product_mod_id,

                values : values

            }

            this.$emit('post',param);

        }
        
    }
}
</script>